<!DOCTYPE html>
<html lang="en">
<head>
	<title>Nokia Mobile Web Components</title>
	<meta charset="utf-8" >
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="author" content="">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta http-equiv="Cache-control" content="no-cache" />
	<link rel="shortcut icon" href="resources/images/favicon.ico" />
	<link rel="stylesheet" href="resources/styles/nokia.mwc-1.0.css" media="screen, handheld" />
	<script src="resources/scripts/nokia.mwc-1.0.js"></script>
	<script>
		function init() {
			var main_menu = SlidingDrawer({"id":"top"});
			
			var options = {
				"id":"social",
				"trigger":"popup-demo",
				"callback":"select"
			};
			var social = new PopupMenu(options);
			
		}
		function select(item) {
			alert("selected: " + item.getAttribute("href"));
		}
		addEvent(window, "load",init);
	</script>
</head>
<body>
	<header id="top" class="sliding-drawer">
		<img src="resources/images/component.png" alt="component" />
		<h1>Mobile Web Components</h1>
		<p>On <a href="https://projects.developer.nokia.com/mobile_web_components">projects.developer.nokia.com</a></p>
		<nav>
			<ul>
				<li><a href="index.html">Overview</a></li>
				<li><a href="collapsible.html">Collapsible</a></li>
				<li><a href="scrollable.html">Scrollable</a></li>
				<li><a href="pop-up-menu.html">Pop-up Menu</a></li>
				<li><a href="sliding-drawer.html">Sliding Drawer</a></li>
				<li><a href="slideshow.html">Slideshow</a></li>
				<li><a href="miscellaneous.html">Miscellaneous</a></li>
			</ul>
		</nav>
	</header>
	
	<header>
		<h2>Pop-up Menu</h2>
		<p>A contextual popup designed to present a small number of related options.</p>
	</header>
	
	<figure>
  		<img src="resources/images/headers/flickr-fuzzy-5427569694.jpg" />
		<figcaption>Original photo licensed under <a href="http://creativecommons.org/licenses/by/2.0/deed.en" rel="license" title="Creative Commons: Attribution 2.0 Generic (CC BY 2.0)">Creative Commons</a> by <a href="http://www.flickr.com/photos/fuzzy/5427569694" title="Sage parmesan popcorn">Fuzzy Gerdes</a>.</figcaption>
	</figure>
	
	<nav id="contents">
		<h4>Contents</h4>
		<ol>
			<li><a href="#intro">Introduction</a></li>
			<li><a href="#usage">General Usage</a></li>
			<li><a href="#properties">Properties & Functions</a></li>
			<li><a href="#demo">Demo: Pop-up Menu</a></li>
		</ol>
	</nav>
	<h3 id="intro">Introduction</h3>
	<p>The pop-up menu component presents a small set of menu options next to a selected object. These options are displayed in a small overlay that is positioned relative to the selected object.</p>
	<p>This component is particularly useful as a contextual menu, enabling users to choose from a small number of tasks related to their current selection or focus. For example, enabling users to initiate the sharing of a link using their favourite social media service.</p>
	<h3 id="usage">General Usage</h3>
	<p>Each menu component requires a trigger element (such as a button or hyperlink) and, the actual menu. The trigger is specified using an id while the menu is specified using a <code>&lt;ul&gt;</code> , which has been nested within a <code>&lt;nav&gt;</code> element with the class &quot;popmenu&quot;. </p>
	<p>The contents of the <code>&lt;nav&gt;</code> will not be shown until the user presses the trigger element. Once this occurs, the menu will become visible, positioned just above the trigger. Pressing a menu option will select that option, while pressing anywhere else (within the document) will hide the menu once again.</p>
	<h3 id="properties">Properties & Functions</h3>
		<table>
			<tr><td>id</td>
			<td>#id of DOM &lt;nav&gt; element</td></tr>
			<tr>
				<td>trigger</td>
			<td>#id of trigger element</td></tr>
			<tr>
			<td>callback</td>
			<td>name of function to be called when an option is selected</td></tr>
		</table>

<!-- *PRE-FORMATTED CODE SNIPPET -->
<code>
<h4>HTML - Trigger</h4>
<pre>
&lt;!-- trigger --&gt;
&lt;a href=&quot;#social&quot; id=&quot;popup-demo&quot;&gt;social demo&lt;/a&gt;
</pre>
</code>
<!-- /PRE-FORMATTED CODE SNIPPET -->
	<p>The code sample above shows the element the user will click on in order to display the menu.</p>
<!-- *PRE-FORMATTED CODE SNIPPET -->
<code>
<h4>HTML - Pop-up menu</h4>
<pre>
&lt;!-- menu --&gt;
&lt;nav id=&quot;social&quot; class=&quot;popupmenu&quot;&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;#google&quot;&gt;+1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#facebook&quot;&gt;Like&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#twitter&quot;&gt;Tweet&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;
</pre>
</code>
<!-- /PRE-FORMATTED CODE SNIPPET -->
	<p>The markup for the menu itself can be included anywhere within the document however it is often most practical to place it towards the bottom of the page.</p>
<!-- *PRE-FORMATTED CODE SNIPPET -->
<code>
<h4>JavaScript</h4>
<pre>
var options = {
  "id":"social",
  "trigger":"popup-demo",
  "callback":"select"
};
var social = new PopMenu(options);

/* the following function
 * is defined as the callback (above)
 */
 
function select(item) {
  var href = item.getAttribute("href")
  alert("selected: " + href);
}
</pre>
</code>
<!-- /PRE-FORMATTED CODE SNIPPET -->
	<p>Once the trigger and pop-up have been created, we then wire things up using the JavaScript shown above. The id should correspond to the id assigned to the <code>&lt;nav&gt;</code>. The trigger should be the id assigned to the element (such as a hyperlink or button) that will trigger the menu.</p>
	<p>By specifying a callback function name (in this case &quot;select&quot;) you can easily respond to whatever item the users selects within the pop-up.</p>
	<nav id="social" class="popupmenu">
		<ul>
			<li><a href="#google">+1 on Google+</a></li>
			<li><a href="#facebook">Like on Facebook</a></li>
			<li><a href="#twitter">Share on Twitter</a></li>
		</ul>
	</nav>
	<h3 id="demo">Demo</h3>
	<p>Pressing on the link at the end of this sentence will display a <a href="#" id="popup-demo">pop-up menu</a>.</p>
	<nav><a href="#top" class="top">back to top</a></nav>
		<footer>
			<nav>
				<ul>
					<li><a href="https://projects.developer.nokia.com/home/">Nokia Projects</a></li>
					<li><a href="http://developer.nokia.com/home/">Developer.nokia.com</a></li>
				</ul>
			</nav>
			<p>Components licensed Creative Commons <a href="http://creativecommons.org/licenses/by/2.0/">CC-BY 2.0</a></p>
		</footer>
</body>
</html>

